<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>轮播图效果</span>
      </div>
      <div class="container">
        <div class="slide" ref="slide">
          <div class="item" ref="item" v-for="item in 8" :key="item" :style="{backgroundImage: 'url(' + require('@/assets/images/lb'+item+'.jpg') + ')' }">
            <div class="content">
              <div class="name">CHN VIEW</div>
              <div class="des">Tinh ru di chay pho, chua kip chay pho</div>
              <button>See more</button>
            </div>
          </div>
        </div>
        <div class="buttons">
          <el-button icon="el-icon-back" circle @click="btn1"></el-button>
          <el-button icon="el-icon-right" circle @click="btn2"></el-button>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>百叶窗效果</span>
      </div>
      <div class="world">
        <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1561948955-570b270e7c36?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60')">
          <h2>猫</h2>
        </div>
        <div class="panel" v-for="item in 7" :key="item" :style="{backgroundImage: 'url(' + require('@/assets/images/lb'+item+'.jpg') + ')' }">
          <h2>{{list[item-1] }} </h2>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片效果</span>
      </div>
      <div class="ntcard">
        <div class="card1">
          <div class="card-img1"></div>
          <div class="card-info1">
            <p class="text-title1">Product title </p>
            <p class="text-body1">Product description and details</p>
          </div>
          <div class="card-footer1">
            <span class="text-title1">$499.99</span>
            <div class="card-button1">
              <svg class="svg-icon1" viewBox="0 0 20 20">
                <path d="M17.72,5.011H8.026c-0.271,0-0.49,0.219-0.49,0.489c0,0.271,0.219,0.489,0.49,0.489h8.962l-1.979,4.773H6.763L4.935,5.343C4.926,5.316,4.897,5.309,4.884,5.286c-0.011-0.024,0-0.051-0.017-0.074C4.833,5.166,4.025,4.081,2.33,3.908C2.068,3.883,1.822,4.075,1.795,4.344C1.767,4.612,1.962,4.853,2.231,4.88c1.143,0.118,1.703,0.738,1.808,0.866l1.91,5.661c0.066,0.199,0.252,0.333,0.463,0.333h8.924c0.116,0,0.22-0.053,0.308-0.128c0.027-0.023,0.042-0.048,0.063-0.076c0.026-0.034,0.063-0.058,0.08-0.099l2.384-5.75c0.062-0.151,0.046-0.323-0.045-0.458C18.036,5.092,17.883,5.011,17.72,5.011z"></path>
                <path d="M8.251,12.386c-1.023,0-1.856,0.834-1.856,1.856s0.833,1.853,1.856,1.853c1.021,0,1.853-0.83,1.853-1.853S9.273,12.386,8.251,12.386z M8.251,15.116c-0.484,0-0.877-0.393-0.877-0.874c0-0.484,0.394-0.878,0.877-0.878c0.482,0,0.875,0.394,0.875,0.878C9.126,14.724,8.733,15.116,8.251,15.116z"></path>
                <path d="M13.972,12.386c-1.022,0-1.855,0.834-1.855,1.856s0.833,1.853,1.855,1.853s1.854-0.83,1.854-1.853S14.994,12.386,13.972,12.386z M13.972,15.116c-0.484,0-0.878-0.393-0.878-0.874c0-0.484,0.394-0.878,0.878-0.878c0.482,0,0.875,0.394,0.875,0.878C14.847,14.724,14.454,15.116,13.972,15.116z"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="card2">
          <div class="card-img2"></div>
          <div class="card-info2">
            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 0h24v24H0z" fill="none"></path>
              <path d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="currentColor"></path>
            </svg>
            <p class="text-title2">Card title</p>
            <p class="text-body2">Lorem Ipsum dolor sit amet</p>
            <button class="card-button2">Read More</button>
          </div>
        </div>
        <div class="card3">
          <div></div>
        </div>
        <div class="card4">
          <h2>CARD</h2>
        </div>
        <div class="card5">
          <div class="card-image5"></div>
          <div class="category5"> Illustration </div>
          <div class="heading5"> A heading that must span over two lines
            <div class="author5"> By <span class="name5">Abi</span> 4 days ago</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'my-timeEffect',
  data() {
    return {
      direction: true,
      timer: null,
      lists: [],
      list: ['自由', 'Happy', 'Manly', '航海', '晚灯', '漫画', '赛车']
    }
  },
  methods: {
    show() {
      function clickEffect() {
        const balls = []
        let longPressed = false
        let longPress
        let multiplier = 0
        let width, height
        let origin
        let normal
        let ctx
        const colours = ['#F73859', '#14FFEC', '#00E0FF', '#FF99FE', '#FAF15D']
        const canvas = document.createElement('canvas')
        document.getElementsByClassName('container')[0].appendChild(canvas)
        canvas.setAttribute('style', 'width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;')
        const pointer = document.createElement('span')
        pointer.classList.add('pointer')
        document.getElementsByClassName('container')[0].appendChild(pointer)

        if (canvas.getContext && window.addEventListener) {
          ctx = canvas.getContext('2d')
          updateSize()
          window.addEventListener('resize', updateSize, false)
          loop()
          window.addEventListener(
            'mousedown',
            function (e) {
              pushBalls(randBetween(10, 20), e.clientX, e.clientY)
              document.body.classList.add('is-pressed')
              longPress = setTimeout(function () {
                document.body.classList.add('is-longpress')
                longPressed = true
              }, 500)
            },
            false
          )
          window.addEventListener(
            'mouseup',
            function (e) {
              clearInterval(longPress)
              if (longPressed === true) {
                document.body.classList.remove('is-longpress')
                pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY)
                longPressed = false
              }
              document.body.classList.remove('is-pressed')
            },
            false
          )
          window.addEventListener(
            'mousemove',
            function (e) {
              const x = e.clientX
              const y = e.clientY
              pointer.style.top = y + 'px'
              pointer.style.left = x + 'px'
            },
            false
          )
        } else {
          console.log('canvas or addEventListener is unsupported!')
        }

        function updateSize() {
          canvas.width = window.innerWidth * 2
          canvas.height = window.innerHeight * 2
          canvas.style.width = window.innerWidth + 'px'
          canvas.style.height = window.innerHeight + 'px'
          ctx.scale(2, 2)
          width = canvas.width = window.innerWidth
          height = canvas.height = window.innerHeight
          origin = {
            x: width / 2,
            y: height / 2
          }
          normal = {
            x: width / 2,
            y: height / 2
          }
        }
        class Ball {
          constructor(x = origin.x, y = origin.y) {
            this.x = x
            this.y = y
            this.angle = Math.PI * 2 * Math.random()
            if (longPressed === true) {
              this.multiplier = randBetween(14 + multiplier, 15 + multiplier)
            } else {
              this.multiplier = randBetween(6, 12)
            }
            this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle)
            this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle)
            this.r = randBetween(8, 12) + 3 * Math.random()
            this.color = colours[Math.floor(Math.random() * colours.length)]
          }

          update() {
            this.x += this.vx - normal.x
            this.y += this.vy - normal.y
            normal.x = (-2 / window.innerWidth) * Math.sin(this.angle)
            normal.y = (-2 / window.innerHeight) * Math.cos(this.angle)
            this.r -= 0.3
            this.vx *= 0.9
            this.vy *= 0.9
          }
        }

        function pushBalls(count = 1, x = origin.x, y = origin.y) {
          for (let i = 0; i < count; i++) {
            balls.push(new Ball(x, y))
          }
        }

        function randBetween(min, max) {
          return Math.floor(Math.random() * max) + min
        }

        function loop() {
          ctx.fillStyle = 'rgba(255, 255, 255, 0)'
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          for (let i = 0; i < balls.length; i++) {
            const b = balls[i]
            if (b.r < 0) continue
            ctx.fillStyle = b.color
            ctx.beginPath()
            ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false)
            ctx.fill()
            b.update()
          }
          if (longPressed === true) {
            multiplier += 0.2
          } else if (!longPressed && multiplier >= 0) {
            multiplier -= 0.4
          }
          removeBall()
          requestAnimationFrame(loop)
        }

        function removeBall() {
          for (let i = 0; i < balls.length; i++) {
            const b = balls[i]
            if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
              balls.splice(i, 1)
            }
          }
        }
      }
      clickEffect() // 调用特效函数
    },
    btn1() {
      this.direction = false
      this.rotation()
    },
    btn2() {
      this.direction = true
      this.rotation()
    },
    rotation() {
      const lists = document.querySelectorAll('.item')
      // const lists = this.$refs.item
      // console.log(this.$refs.item === document.querySelectorAll('.item')) 为什么为false?
      // console.log(lists)
      if (this.direction) {
        this.$refs.slide.appendChild(lists[0])
        // document.getElementsByClassName('slide')[0].appendChild(lists[0])
      } else {
        this.$refs.slide.prepend(lists[lists.length - 1])
        // document.getElementsByClassName('slide')[0].prepend(lists[lists.length - 1])
      }
    },
    // 鼠标经过-停止定时器
    mouseover() {
      document.querySelector('.container').addEventListener('mouseover', () => {
        clearInterval(this.timer)
      })
    },
    // 鼠标离开-开启定时器
    mouseout() {
      document.querySelector('.container').addEventListener('mouseout', () => {
        this.timer = setInterval(this.rotation, 5000)
      })
    },
    world() {
      const container = document.querySelector('.world')
      const panels = document.querySelectorAll('.panel')

      container.addEventListener('click', function (e) {
        // console.log(e)
        let clickedPanel = null
        if (e.target.tagName === 'H2') {
          clickedPanel = e.target.parentNode
        } else {
          clickedPanel = e.target
        }
        panels.forEach(panel => {
          panel.classList.remove('active')
        })
        clickedPanel.classList.add('active')
      })
    }
  },
  mounted() {
    this.show()
    this.timer = setInterval(this.rotation, 5000)
    // 离开当前页面时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer)
      this.timer = null
    })
    this.mouseover()
    this.mouseout()
    this.world()
  }
}
</script>

<style lang="less">
.el-main {
  overflow-x: hidden;
  height: 610px;
}
.box-card {
  width: 100%;
  background-color: rgba(242, 242, 242, 0.6);
  margin-bottom: 10px;
}
.clearfix span {
  font-size: 16px;
  font-weight: 700;
}
.container {
  width: 90%;
  height: 450px;
  padding: 25px 50px;
  box-shadow: 0 30px 50px #dbdbdb;
  background-color: rgba(242, 242, 242, 0.6);
  position: relative;
}
#slide {
  width: max-content;
  margin-top: 40px;
}
.item {
  width: 150px;
  height: 200px;
  background-size: cover;
  background-position: 40%, 100%;
  position: absolute;
  display: inline-block;
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  transition: 1s;
}
.item:nth-child(1),
.item:nth-child(2) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  box-shadow: none;
}
.item:nth-child(3) {
  left: 58%;
}
.item:nth-child(4) {
  left: calc(58% + 170px);
}
.item:nth-child(5) {
  left: calc(58% + 340px);
}
.item:nth-child(n + 6) {
  left: calc(58% + 490px);
  opacity: 0;
}
.item .content {
  width: 200px;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #eee;
  display: none;
}
.item:nth-child(2) .content {
  display: block;
}
.item .name {
  font-size: 20px;
  font-weight: 700;
  opacity: 0;
  animation: showcontent 1s ease-in-out 1 forwards;
}
.item .des {
  margin: 10px 0;
  opacity: 0;
  animation: showcontent 1s ease-in-out 0.3s 1 forwards;
}
.item button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  opacity: 0;
  animation: showcontent 1s ease-in-out 0.6s 1 forwards;
  color: #9eb0ff;
  font-weight: 700;
}
@keyframes showcontent {
  from {
    opacity: 0;
    transform: translateY(100px);
    // 模糊度
    filter: blur(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.buttons {
  width: 90%;
  position: absolute;
  bottom: 20px;
  text-align: center;
}
.el-button {
  margin: 0 40px;
  transition: 0.5s;
}
.el-button:focus,
.el-button:hover {
  color: #c7d3ff;
  border-color: #dcc7ff;
  background-color: #ecf5ff;
}
// 百叶窗效果css
.world {
  display: flex;
  width: 70vw;
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 40vh;
  border-radius: 8px;
  cursor: pointer;
  flex: 0.5;
  color: #fff;
  margin: 10px;
  position: relative;
  transition: flex 0.7s ease-in;
}

.panel:first-of-type {
  background-position: 50% 30%;
}

.panel:nth-of-type(3) {
  background-position: 80% 10%;
}

.panel:nth-of-type(5) {
  background-position: 50% 10%;
}

.panel h2 {
  position: absolute;
  font-size: 24px;
  bottom: 20px;
  left: 20px;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h2 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
  .container {
    width: 100vw;
    padding: 0 5px;
  }

  .panel {
    margin: 0 5px;
  }

  .panel.active {
    flex: 4;
  }

  .panel:nth-of-type(3) {
    background-position: 65% 10%;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}
// 拟态阴影
.ntcard {
  display: flex;
  justify-content: flex-start;
}
.card1 {
  width: 190px;
  height: 254px;
  padding: 0.8em;
  background: #f5f5f5;
  position: relative;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin-right: 20px;
}

.card-img1 {
  // background-color: #ffcaa6;
  background-image: url(../../assets/images/icon2.jpg);
  background-position: 100%, 100%;
  background-size: cover;
  height: 50%;
  width: 100%;
  border-radius: 0.5rem;
  transition: 0.3s ease;
}

.card-info1 {
  padding-top: 10%;
}

svg {
  width: 20px;
  height: 20px;
}

.card-footer1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

/*Text*/
.text-title1 {
  font-weight: 900;
  font-size: 1.2em;
  line-height: 1.5;
}

.text-body1 {
  font-size: 0.9em;
  padding-bottom: 10px;
}

/*Button*/
.card-button1 {
  border: 1px solid #252525;
  display: flex;
  padding: 0.3em;
  cursor: pointer;
  border-radius: 50px;
  transition: 0.3s ease-in-out;
}

/*Hover*/
.card-img1:hover {
  transform: translateY(-25%);
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}

.card-button1:hover {
  border: 1px solid #ffcaa6;
  background-color: #ffcaa6;
}
.card2 {
  width: 190px;
  height: 254px;
  border-radius: 1em;
  padding: 1.9rem;
  background: #f5f5f5;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);
}

.card2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  // background: rgba(238, 116, 116, 0.4);
  background-image: url(../../assets/images/icon6.jpg);
  background-position: 50%, 50%;
  background-size: cover;
  z-index: 2;
  transition: 0.5s;
}

.card-info2 {
  position: relative;
  z-index: 3;
  color: #f5f5f5;
  opacity: 0;
  transform: translateY(20%);
  transition: 0.5s;
}

/*Text*/
.text-title2 {
  font-size: 1.5rem;
  font-weight: 500;
}

.text-body2 {
  letter-spacing: 1px;
  font-size: 0.9rem;
  margin: 5px 0 15px 0;
}

/*Button*/
.card-button2 {
  padding: 0.6rem;
  outline: none;
  border: none;
  border-radius: 4px;
  // background: #ee9ca7;
  background: #dcc7ff;
  color: white;
  font-weight: bold;
  transition: 0.4s ease;
}

/*Image*/
.card-img2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ee9ca7;
  background: linear-gradient(to bottom, #e7aeae, #ee9ca7);
}

/*Hover*/
.card2:hover {
  transform: translateY(0%);
}

.card2:hover:before {
  opacity: 1;
}

.card2:hover .card-info2 {
  opacity: 1;
  transform: translateY(0);
}

.card-button2:hover {
  // background: rgba(218, 77, 77, 0.4);
  background: #d9b3ff;
  color: #f5f5f5;
}
.card3 {
  width: 190px;
  height: 254px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.212);
  background: #fff;
  display: flex;
  border-radius: 20px;
  justify-content: center;
  position: relative;
  transition: all 0.4s;
  margin: 0 20px;
}

.card3::before {
  content: '---习惯吹晚风---';
  letter-spacing: 0.2em;
  position: absolute;
  bottom: 8px;
  left: 20px;
  color: rgb(51, 51, 51);
  font-size: 0.8em;
  font-weight: 700;
}

.card3 div {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.212);
  cursor: pointer;
  z-index: 10;
  transition: all 0.4s;
  // background-color: #fff;
  background-image: url(../../assets/images/icon1.jpg);
  background-position: 18%, 100%;
  background-size: cover;
}

.card3:hover div {
  transform: translateY(-30px);
}
.card4 {
  width: 190px;
  height: 254px;
  background: #07182e;
  // 相对定位
  position: relative;
  // flex布局
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.card4 h2 {
  z-index: 1;
  color: white;
  font-size: 2em;
}

.card4::before {
  content: '';
  position: absolute;
  width: 100px;
  background-image: linear-gradient(180deg, #c2e4ff, #d9b3ff);
  height: 130%;
  animation: rotBGimg 3s linear infinite;
  transition: all 0.2s linear;
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.card4::after {
  content: '';
  position: absolute;
  background: #07182e;
  background-image: url(../../assets/images/icon3.jpg);
  background-position: 75%, 100%;
  background-size: cover;
  inset: 5px;
  border-radius: 15px;
}
/* .card:hover:before {
  background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
  animation: rotBGimg 3.5s linear infinite;
} */
.card5 {
  width: 190px;
  height: 254px;
  background: white;
  padding: 0.4em;
  border-radius: 6px;
  margin: 0 20px;
}

.card-image5 {
  // background-color: rgb(236, 236, 236);
  width: 100%;
  height: 60%;
  border-radius: 6px 6px 0 0;
  background-image: url(../../assets/images/icon7.jpg);
  background-position: 75%, 100%;
  background-size: cover;
}

.card-image5:hover {
  transform: scale(0.98);
}

.category5 {
  text-transform: uppercase;
  font-size: 0.7em;
  font-weight: 600;
  // color: rgb(63, 121, 230);
  color: #d9b3ff;
  padding: 10px 7px 0;
}

.category5:hover {
  cursor: pointer;
}

.heading5 {
  font-weight: 600;
  color: rgb(88, 87, 87);
  padding: 7px;
}

.heading5:hover {
  cursor: pointer;
}

.author5 {
  color: gray;
  font-weight: 400;
  font-size: 11px;
  padding-top: 10px;
}

.name5 {
  font-weight: 600;
}

.name5:hover {
  cursor: pointer;
}
</style>
